<template>
    <div class="fill-log-main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">填写物流</span>
            </template>
        </van-nav-bar>
        <div class="log-form-template">
            <div class="form-template-item">
                <div class="item-label">寄件人</div>
                <input type="text" class="item-input" v-model="form.user_name" placeholder="请填写寄件人">
            </div>
            <div class="form-template-item">
                <div class="item-label">电话</div>
                <input type="tel" class="item-input" v-model="form.user_mobile" placeholder="请填写电话" style="font-family: 'DINPro-Regular';">
            </div>
            <div class="form-template-item">
                <div class="item-label">物流公司</div>
                <input type="text" class="item-input" v-model="form.log_name" placeholder="请填写物流公司">
            </div>
            <div class="form-template-item">
                <div class="item-label">物流单号</div>
                <input type="number" class="item-input" v-model="form.log_sn" placeholder="请填写物流单号" style="font-family: 'DINPro-Regular';">
            </div>
            <div class="address-info">
                <p>回寄地址</p>
                <van-cell-group>
                    <van-cell title="收件人" :value="address.user_name" />
                    <van-cell title="电话">
                        <template #default>
                            <span style="font-family: 'DINPro Medium';">{{address.phone | changePhone}}</span>
                        </template>
                    </van-cell>
                    <van-cell title="地址" :value="`${address.shi} ${address.qu} ${address.address}`" />
                </van-cell-group>
            </div>
        </div>
        <img class="submitBtn" @click="submitForm" :src="canToSub?activeBtn:deactiveBtn" alt="">
    </div>
</template>
<script>
import {_logistic,_getOrderAddress} from '../../service/order'
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            canToSub:false,
            activeBtn:require('../../assets/img/fill-submit-active.png'),
            deactiveBtn:require('../../assets/img/fill-submit-deactive.png'),
            form:{
                user_name:"",
                user_mobile:"",
                log_name:"",
                log_sn:""
            },
            address:{}
        }
    },
    computed:{
        user_name(){return this.form.user_name},
        user_mobile(){return this.form.user_mobile},
        log_name(){return this.form.log_name},
        log_sn(){return this.form.log_sn},
    },
    watch:{
        user_name(){this.canToSub=this.valiForm().data},
        user_mobile(){this.canToSub=this.valiForm().data},
        log_name(){this.canToSub=this.valiForm().data},
        log_sn(){this.canToSub=this.valiForm().data },
    },
    mounted(){
        this.getAddress()
    },
    filters:{
        changePhone(val){
            if(val!=undefined){
                return val.replace(/(^\d{3}|\d{4}\B)/g,"$1 ");
            }
        }
    },
    methods:{
        onClickLeft(){
            this.$router.push("/own")
        },
        valiForm(){
            if(this.form.user_name==""){
                return {data:false,msg:"请填写寄件人"}
            }
            if(this.form.user_mobile==""){
                return {data:false,msg:"请填写电话"}
            }
            if(this.form.log_name==""){
                return {data:false,msg:"请填写物流公司"}
            }
            if(this.form.log_sn==""){
                return {data:false,msg:"请填写物流单号"}
            }
            return {data:true}
        },
        getAddress(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            let reid=this.$route.query.reid
            _getOrderAddress({
                user_id:uid,
                refund_id:reid
            }).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    _this.address=res.data
                }
            })
        },
        submitForm(){
            let _this=this
            let reid=this.$route.query.reid
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            if(!this.valiForm().data){
                this.$toast(this.valiForm().msg)
            }
            _logistic({
                refund_id:reid,
                user_id:uid,
                log_name:_this.form.log_name,
                log_sn:_this.form.log_sn,
                user_name:_this.form.user_name,
                user_mobile:_this.form.user_mobile
            }).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    _this.$router.push("/own")
                }else{
                    _this.$toast(res.message)
                }
            })
        }

    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.fill-log-main{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    overflow-y: auto;
    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }
    .log-form-template{
        width: 100%;
        height: auto;
        padding-left: 15px;
        padding-right: 15px;
        .form-template-item{
            width: 100%;
            .item-label{
                width: 100%;
                .font-SC();
                font-weight: bold;
                font-size: 15px;
                color: #333;
                margin-top: 12px;
            }
            input{
                background:none;  
                outline:none;  
                border:none;
                height: 40px;
                width: 100%;
                line-height: 40px;
                .font-SC();
                font-size: 15px;
                color: #000;
                caret-color:#000;
                padding-left: 15px;
                caret-color:#000 !important;
            }
            .item-input{
                margin-top: 12px;
                border: 1px solid #e6e6e6;
                border-radius: 5px;
            }

        }

        .address-info{
            width: 100%;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
            margin-top: 12px;
            padding-left: 11px;
            padding-right: 11px;
            padding-bottom: 11px;
            p{
                width: 100%;
                .font-SC();
                font-weight: bold;
                font-size: 15px;
                color: #333;
                margin-top: 13px;
                margin-bottom: 5px;
            }
            /deep/.van-cell{
                padding: 0;
                .font-SC();
                font-size: 15px;
                color: #333;
                line-height: 24px;
            }
            /deep/.van-cell:not(:last-child)::after{
                display: none;
            }
            /deep/.van-cell__value{
                .font-SC();
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

        }

    }
    .submitBtn{
        width: 367px;
        margin: 34px auto 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>